<template>
  <div>
    <el-input
            v-if="column.display"
            v-model="val"
            size="small"
            :disabled="column.disabled"
            :placeholder="column.showContent | capitalize"
            @input="handleChange"
    ></el-input>
  </div>
</template>

<script>
  import mixCalculator from './mixCalculator';
  export default {
    inject: ['getViewFormData',"viewFormData"],
    name: 'calculator',
    mixins: [mixCalculator],
    model: {
      prop: 'value',
      event: 'input'
    },
    props: ['column', 'modelValue', '$index'],

    data() {
      const val = this.viewFormData?.form ? this.viewFormData.form[this.column.prop] : '';
      const { disabled, display } = this.column || {};
      return {
        val,
        disabled,
        display
      };
    },
    // watch: {
    //   // avue update 2.8.4 bug
    //   'viewFormData.form': {
    //     handler(form) {
    //       if (form) {
    //         const { prop } = this.column || {};
    //         setTimeout(() => {
    //           this.val = form[prop];
    //           // const newVal = form[prop];
    //           // if (!newVal||newVal !== this.val) {
    //           //   this.val = form[prop];
    //           //   this.$emit('input', newVal);
    //           // }
    //         }, 500);
    //       }
    //     },
    //     deep: true,
    //     immediate: true
    //   }
    // },
    filters: {

      capitalize(val) {
        if (val) {
          return val.replace(/&nbsp;/g, '').replace(/<\/?[^>]*>/g, '');
        } else {
          return '自动计算';
        }
      }
    },
    created() {
      this.watchProp();
    },
    methods: {
      watchProp(){
        this.$watch('viewFormData.form.'+this.column.prop, (newValue, oldValue) => {
          this.val = newValue;
        });
      },
      handleChange(val) {
        // const { prop } = this.column;
        // const { str } = this.isDynamicProp(prop);
        // if (str) {
        //   this.runFormData2(str);
        // } else {
        //   this.runFormData(prop);
        // }
        this.$emit('update:modelValue', val);
        //his.$emit('input', val);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .font1 {
    color: #999;
  }
</style>
